<template>
  <div class="customer-container">
    <!-- 搜索栏部分 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px" inline>
        <el-form-item label="工序编码">
          <el-input v-model="searchForm.processCode" placeholder="工序编码" clearable />
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input v-model="searchForm.processName" placeholder="工序名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select style="width: 120px;" v-model="searchForm.isActive" placeholder="请选择状态" clearable>

            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button x type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 工具栏部分 -->
    <div class="toolbar">
      <el-button type="primary" @click="handleAdd">新增工序</el-button>
      <el-button type="danger" @click="handleBatchDelete" :disabled="selectedProcess.length === 0">批量删除</el-button>
    </div>

    <!-- 列表 -->
    <el-card class="table-card">
      <el-table
          :data="processList"
          border
          stripe
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="processCode" label="工序编码" >
          <template #default="scope">
            <el-link @click="handlerShowProcess(scope.row)">{{scope.row.processCode}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="processName" label="工序名称" />
        <el-table-column prop="processDescription" label="工序说明" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="isActive" label="状态" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.isActive == '1' ? 'success' : 'danger'">
              {{ scope.row.isActive == '1' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页栏 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!-- 用户编辑/新增对话框 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="80%"
        @close="handleDialogClose"
    >
      <el-form
          :model="processForm"
          :rules="processFormRules"
          ref="processFormRef"
          label-width="80px"

      >
        <el-form-item label="工序编码"  prop="cprocessCode">
          <el-row style="width: 100%">
            <el-col :span="22">
              <el-input :disabled="isDetail" v-model="processForm.processCode" />
            </el-col>
            <el-col :span="2">
              <el-switch @click="autoCode" v-if="!isDetail"
                         v-model="isAutoCode"
                         size="large"
                         inline-prompt
                         active-text="生成"
                         inactive-text="生成"
              />
            </el-col>
          </el-row>


        </el-form-item>
        <el-form-item label="工序名称" prop="processName">
          <el-input :disabled="isDetail" v-model="processForm.processName" />
        </el-form-item>
        <el-form-item label="工序说明" prop="processDescription">
          <el-input :disabled="isDetail" type="textarea" v-model="processForm.processDescription" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remarks">
          <el-input :disabled="isDetail" type="textarea"  v-model="processForm.remarks" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group :disabled="isDetail" v-model="processForm.isActive">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-card v-show="isDetail || isEdit" >
        <template #header>
          <div class="card-header">
            <span>工序步骤</span>
          </div>
        </template>
        <template #default>
          <!-- 工具栏部分 -->
          <div class="toolbar" v-if="isEdit">
            <el-button type="primary" @click="handleStepAdd">新增工序步骤</el-button>
          </div>
          <el-table
              :data="processStepList"
              border
              stripe
          >
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="stepOrder" label="步骤顺序"/>
            <el-table-column prop="materialUrl" label="材料URL"/>
            <el-table-column prop="auxiliaryEquipment" label="辅助设备"/>
            <el-table-column prop="auxiliaryMaterials" label="辅助材料"/>
            <el-table-column prop="stepDescription" label="步骤说明"/>
            <el-table-column  v-if="isEdit" label="操作" width="200">
              <template #default="scope">
                <el-button size="small" @click="handleStepEdit(scope.row)">编辑</el-button>
                <el-button
                    size="small"
                    type="danger"
                    @click="handleStepDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              style="margin-top: 15px"
              v-model:current-page="processStepPagination.currentPage"
              v-model:page-size="processStepPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="processStepPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleProcessStepSizeChange"
              @current-change="handleProcessStepCurrentChange"
          />
        </template>
      </el-card>
      <el-dialog :title="processStepWinTitle" v-model="processStepWinDialogVisible" width="80%">
        <el-form
            :model="processStepForm"
            :rules="processStepFormRules"
            ref="processStepFormRef"
            label-width="80px"
        >
          <el-form-item label="步骤顺序" prop="stepOrder">
            <el-input v-model="processStepForm.stepOrder" />
          </el-form-item>
          <el-form-item label="材料URL" prop="materialUrl">
            <el-input v-model="processStepForm.materialUrl" />
          </el-form-item>
          <el-form-item label="辅助设备" prop="auxiliaryEquipment">
            <el-input v-model="processStepForm.auxiliaryEquipment" />
          </el-form-item>
          <el-form-item label="辅助材料" prop="auxiliaryMaterials">
            <el-input v-model="processStepForm.auxiliaryMaterials" />
          </el-form-item>
          <el-form-item label="步骤说明" prop="stepDescription">
            <el-input type="textarea" v-model="processStepForm.stepDescription" />
          </el-form-item>
          <el-form-item label="备注信息" prop="remarks">
            <el-input type="textarea" v-model="processStepForm.remarks" />
          </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="cancelAddOrUpdateProcessStep">取消</el-button>
                      <el-button type="primary" @click="submitProcessStepForm">确定</el-button>
                    </span>
        </template>
      </el-dialog>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button v-if="!isDetail" type="primary" @click="submitProcessForm">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getProcessList,
  addProcess,
  queryByCode,
  updateProcess,
  deleteProcess,
  batchDeleteProcess,
  getAutoCode
} from "@/api/process.js";
import {
  getProcessStepList,
  addProcessStep,
  deleteProcessStep,
  updateProcessStep,
  getProcessStepById
} from "@/api/processStep.js";


// 搜索表单
const searchForm = reactive({
  processCode:'',
  processName:'',
  isActive: ''
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 用户列表数据
const processList = ref([])

// 选中的用户
const selectedProcess = ref([])

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)

// 用户表单
const processForm = reactive({
  id: '',
  processCode: '',
  processName: '',
  processDescription: '',
  remarks: '',
  isActive:''
})
// 是否展示详情标记
const isDetail = ref(false);

// 表单验证规则
const processFormRules = {
}

// 是否自动生成编号
const isAutoCode = ref(false);


const handlerShowProcess = (row) => {
  dialogTitle.value = '查看工序'
  // 填充表单数据
  getProcessStepById(row.id).then(res=>{
    Object.assign(processForm, row)
    dialogVisible.value = true
    isDetail.value = true;
    loadProcessStepList(row.id)
  })

}

const processFormRef = ref()


// 工序步骤相关属性----↓
// 工序步骤列表
const processStepList = ref([])
const processStepWinDialogVisible = ref(false);
const processStepForm = reactive({
  id: '',
  processId: '',
  stepOrder: '',
  materialUrl: '',
  auxiliaryEquipment: '',
  auxiliaryMaterials: '',
  stepDescription:'',
  remarks:'',
})
const processStepIsEdit = ref(false);
const processStepPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const processStepWinTitle = ref('新增工序步骤');


// 自动生成工序编号的函数
const autoCode=()=>{
  if(isAutoCode.value){
    // 生成编号
    getAutoCode().then(res=>{
      if(res.code == 200){
        processForm.processCode = res.data;
      }else{
        isAutoCode.value = false;
        ElMessage.error("编号自动生成失败")
      }
    })
  }else{
    processForm.processCode = "";
  }
}


// 工序步骤相关属性----↑
// 工序步骤相关方法---↓
// 删除工序步骤按钮事件
const handleStepDelete=(row) => {
  ElMessageBox.confirm(
      `确定要删除工序步骤 "${row.stepOrder}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 模拟删除操作
    deleteProcessStep(row.id).then(res=>{
      if (res.code == 200){
        ElMessage.success('删除成功')
        loadProcessStepList(processForm.id)
      }else{
        ElMessage.error('删除失败')
      }
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
// 编辑工序步骤按钮事件
const handleStepEdit = (row) => {
  processStepWinTitle.value = '编辑工序步骤';
  processStepIsEdit.value = true;
  getProcessStepById(row.id)
      .then(res=>{
        processStepForm.id = res.data.id;
        processStepForm.processId = res.data.processId;
        processStepForm.stepOrder = res.data.stepOrder;
        processStepForm.materialUrl = res.data.materialUrl;
        processStepForm.auxiliaryEquipment = res.data.auxiliaryEquipment;
        processStepForm.auxiliaryMaterials = res.data.auxiliaryMaterials;
        processStepForm.stepDescription = res.data.stepDescription;
        processStepForm.remarks = res.data.remarks;
        processStepWinDialogVisible.value = true;
      })
}
const loadProcessStepList = (processId) => {
  getProcessStepList({processId:processId,pageNum:processStepPagination.currentPage,size:processStepPagination.pageSize})
      .then(res=>{
        processStepList.value = res.data.list;
        processStepPagination.total = res.data.total;
      })
}
//  处理新增工序步骤
const handleStepAdd = () => {
  processStepWinTitle.value = '新增工序步骤';
  processStepIsEdit.value = false;
  processStepWinDialogVisible.value = true;
}
// 关闭新增工序步骤弹窗
const cancelAddOrUpdateProcessStep = () => {
  processStepWinDialogVisible.value = false;
  processStepForm.processId = '';
  processStepForm.id = '';
  processStepForm.stepOrder = '';
  processStepForm.materialUrl = '';
  processStepForm.auxiliaryEquipment = '';
  processStepForm.auxiliaryMaterials = '';
  processStepForm.stepDescription = '';
  processStepForm.remarks = '';
}
// 新增/编辑工序步骤
const submitProcessStepForm = () => {
  processStepForm.processId = processForm.id;
  console.log(processStepForm)
  if(processStepIsEdit.value){
    updateProcessStep(processStepForm)
        .then(res=>{
          if (res.code == 200){
            ElMessage.success('修改工序步骤成功');
            cancelAddOrUpdateProcessStep();
            loadProcessStepList(processForm.id);
          }else{
            ElMessage.error(res.message)
          }
        })
  }else{
    addProcessStep(processStepForm)
        .then(res=>{
          if (res.code == 200){
            ElMessage.success('新增工序步骤成功');
            cancelAddOrUpdateProcessStep();
            loadProcessStepList(processForm.id);
          }else{
            ElMessage.error(res.message)
          }
        })
  }
}
const handleProcessStepSizeChange=(size) => {
  processStepPagination.pageSize = size;
  loadProcessStepList(processForm.id);
}
const handleProcessStepCurrentChange=(currentPage) => {
  processStepPagination.currentPage = currentPage;
  loadProcessStepList(processForm.id);
}
// 工序步骤相关方法---↑
// 处理搜索
const handleSearch = () => {
  getProcessList({processCode:searchForm.processCode,processName:searchForm.processName,isActive:searchForm.isActive,page:pagination.currentPage,size:pagination.pageSize})
      .then(res=>{
        processList.value = res.data.list;
        pagination.total = res.data.total;
      })
}

// 重置搜索
const resetSearch = () => {
  searchForm.processCode = ''
  searchForm.processName = ''
  searchForm.isActive = ''
}

// 处理新增用户
const handleAdd = () => {
  dialogTitle.value = '新增工序'
  isEdit.value = false
  // 重置表单
  Object.assign(processForm, {
    id: '',
    processCode: '',
    processName: '',
    processDescription: '',
    remarks: '',
    isActive:''
  })
  dialogVisible.value = true
}

// 处理编辑用户
const handleEdit = (row) => {
  dialogTitle.value = '编辑工序'
  isEdit.value = true
  // 填充表单数据
  Object.assign(processForm, row)
  dialogVisible.value = true;
  loadProcessStepList(row.id);
}

// 处理删除用户
const handleDelete = (row) => {
  ElMessageBox.confirm(
      `确定要删除工序 "${row.processName}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 模拟删除操作
    deleteProcess(row.id).then(res=>{
      if (res.code==200){
        ElMessage.success('删除成功')
        handleSearch();
      }else {
        ElMessage.error('删除失败')
      }
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 处理批量删除
const handleBatchDelete = () => {
  ElMessageBox.confirm(
      `确定要删除选中的 ${selectedProcess.value.length} 个工序吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    let param = '';
    selectedProcess.value.forEach(item => {
      param += "id=" + item.id + "&";
    })
    param = param.substring(0, param.length - 1);
    batchDeleteProcess(param).then(res=>{
      if (res.code==200){
        ElMessage.success('批量删除成功')
        handleSearch();
      }else {
        ElMessage.error('批量删除失败')
      }
    })
    selectedProcess.value = []
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 提交用户表单
const submitProcessForm = () => {
  processFormRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        updateProcess(processForm).then(res=>{
          if (res.code==200){
            ElMessage.success('编辑工序成功')
            handleSearch();
          }else{
            ElMessage.error(res.message);
          }
        })
      } else {
        addProcess(processForm).then(res=>{
          if (res.code==200){
            ElMessage.success('新增工序成功')
            handleSearch();
          }else{
            ElMessage.error(res.message);
          }
        })
      }
      dialogVisible.value = false
    }
  })
}

// 处理对话框关闭
const handleDialogClose = () => {
  processFormRef.value.resetFields()
  isDetail.value = false;
  isEdit.value = false;
  isAutoCode.value = false;
}

// 处理选中项变化
const handleSelectionChange = (selection) => {
  selectedProcess.value = selection
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  handleSearch();
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  handleSearch();
}

// 初始化数据
onMounted(() => {
  handleSearch();

})


</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>